import React, { memo, useEffect } from 'react'
import type { FC, ReactNode } from 'react'
import { PlayListHeaderWarp } from './style'
import { getSizeImage } from '@/utils/format-utils'
import { fetchPlayListAction } from '@/store/modules/musicplayer'
import { shallowEqual, useDispatch } from 'react-redux'
import { useAppSelector } from '@/store'
import { useLocation, useParams } from 'react-router-dom'

interface IProps {
  children?: ReactNode
}

const PlayListHeader: FC<IProps> = () => {
  const dispach = useDispatch()
  const { palyListArr } = useAppSelector(
    (state) => ({
      palyListArr: state.musicplayer.playListArr
    }),
    shallowEqual
  )
  const { id } = useLocation().state
  useEffect(() => {
    dispach(fetchPlayListAction(id))
  }, [])
  const picUrl = palyListArr && palyListArr.coverImgUrl
  const name = palyListArr && palyListArr.name
  const desc = palyListArr && palyListArr.description
  const tags = palyListArr && palyListArr.tags
  const creator = palyListArr && palyListArr.creator
  const userUrl = creator && creator.avatarUrl
  const nickname = creator && creator.nickname

  return (
    <PlayListHeaderWarp>
      <div className="image">
        <img src={getSizeImage(picUrl, 200)} alt="" />
      </div>
      <div className="content">
        <div className="title">
          <div className="tag sprite_icon2"></div>
          <div className="text">{name}</div>
        </div>
        <div className="user-info">
          <div className="image">
            <img src={getSizeImage(userUrl, 35)} alt="" />
          </div>
          <a rel="noopener noreferrer" href="#/#" className="name">
            {nickname}
          </a>
          <div className="time">{} 创建</div>
        </div>
        <div className="control"></div>
        <div className="tag">
          标签：
          {tags &&
            tags.map((item: any) => {
              return <div className="icon">{item}</div>
            })}
        </div>
        <div className="desc">简介：{desc}</div>
      </div>
    </PlayListHeaderWarp>
  )
}

export default memo(PlayListHeader)
